/*
 * @Author: xiaosihan 
 * @Date: 2024-08-18 17:48:38 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-08-18 17:50:04
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./attribute.module.less";
import utils from "@utils";
import partCollaborateStore from "../../partCollaborateStore";

interface Iprops {
    children?: ReactNode
}

// 属性
export default function Attribute(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [modelName, setModelName] = useState(partCollaborateStore.modelName);
    const [size, setSize] = useState(partCollaborateStore.size);
    const [createTime, setCreateTime] = useState(partCollaborateStore.createTime);

    useEffect(() => autorun(() => {
        setModelName(partCollaborateStore.modelName);
        setSize(partCollaborateStore.size);
        setCreateTime(partCollaborateStore.createTime);
    }), []);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {

    }), []);

    return (
        <div className={styles.attribute} >
            <div className={styles.title} >属性</div>

            <div className={styles.item} >
                <span className={styles.lable} >名称</span>
                <span className={styles.name} >
                    {(modelName || "").replace(/\w+$/, "")}
                </span>
                <span className={styles.suffix} >
                    {utils.getSuffix(modelName)}
                </span>
            </div>

            <div className={styles.item} >
                <span className={styles.lable} >格式</span>
                <span className={styles.suffix} >
                    {utils.getSuffix(modelName)}
                </span>
            </div>

            <div className={styles.item} >
                <span className={styles.lable} >大小</span>
                <span className={styles.suffix} >
                    {size}
                </span>
            </div>

            <div className={styles.item} >
                <span className={styles.lable} >上传日期</span>
                <span className={styles.suffix} >
                    {createTime}
                </span>
            </div>


        </div>
    );

}